<!DOCTYPE html>
<html>
<head>
    <title>设置</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width = device-width , initial-scale = 1 , minimum-scale = 1 , maximum-scale = 1 , user-scalable = no">
    <link rel="stylesheet" href="../../resource/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../resource/css/common.css">
</head>
<body class="bg-color-1">
<div id="header"  class="bg-color-2">
    <a href="javascript:void(0)" class="nav-back">返回</a>
    设置
    <span></span>
</div>
<div class="detail-part bg-color-2">
    <div class="detail-head bg-img bd-bot">
       <!--<img src="" class="user-headImage-set"/>-->
        <!-- 选择照片 -->
     <!--   <input id="head-image" name="head-image" type=file accept="image/*">-->
    </div>
    <div class="detail-info ">
        昵称<input class="nick-name">
    </div>
</div>
<div class="main-part bg-color-2">
    <ul>
        <li class="user-info-detail" id="0">
            常活动的区域
        </li>
        <li class="user-info-detail" id="1">
            喜欢的类型
        </li>
        <li class="user-info-detail" id="2">
            喜欢的商家
        </li>
    </ul>
</div>
<div class="code-part bg-color-2">
    <h1 class="user-info-detail">积分明细</h1>
</div>
<div class="help-part bg-color-2">
    <h1 class="user-info-detail help">使用帮助</h1>
    <h1 class="user-info-detail about">关于我们</h1>
</div>
<div class="quit-part bg-color-2">
    <h1 class="login-out">退出登录</h1>
</div>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="sanFast-btn back"
                        data-dismiss="modal">否
                </button>
                <button type="button" onclick="" class="sanFast-btn login">
                    是
                </button>
            </div>
        </div>
    </div>
</div>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="../../resource/js/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="../../resource/js/bootstrap.min.js"></script>
<script src="../../resource/js/commonjs.js"></script>
<script type="text/javascript">
        setInterval(clear,500);
        $(function() {
            isLogin();
            getUserDetail();
            evenBinding();
        });
        function clear(){
            $(".user-info-detail").removeClass("bg-click");
        }
        function evenBinding() {
            $(".nav-back").click(function() {
                location.href = "userInfo.html?url=1";
            });
            $('.detail-head').click(function() {
                $(this).addClass("bg-click");
                location.href = "userImage.html?url=1";
            });
            $(".main-part .user-info-detail").click(function() {
                $(this).addClass("bg-click");
                var page = $(this).attr('id');
                location.href = "../register/registerPerfectInfo.html?page=" + page;
            });
            $(".code-part .user-info-detail").click(function() {
                $(this).addClass("bg-click");
                location.href = "userCodeInfo.html?url=1";
            });
            $(".login-out").click(function () {
                isLoginOut();
            });
            $(".nick-name").focus(function() {
                $(this).addClass("clicked");
            }).blur(function() {
                $(this).removeClass("clicked");
            });
            $(".nick-name").change(function () {
                var nn = $(this).val();
                if(nn.length > 0) {
                    $(".no-nn").remove();
                    saveNickName(nn);
                } else {
                    checkData();
                }
            });
            $(".help").click(function () {
                $(this).addClass("bg-click");
                location.href = "userHelp.html?url=1";
            });
            $(".about").click(function () {
                $(this).addClass("bg-click");
                setTimeout(function(){
                    $(this).removeClass("bg-click");
                },500);
                location.href = "../aboutCoupon/aboutUs.html?url=1";
            })
        }
        /* 保存用户昵称 */
        function saveNickName(name) {
            var url = "/UserCenter/saveNickname";
            var arg = {};
            arg.nickname = name;
            ajaxJsonp(url, arg);
        }
        /* 是否退出弹窗 */
        function isLoginOut() {
            var html = "";
                html += '<div class="modal-body">真的要退出么？';
                html += '</div>';
                html += '<div class="modal-footer">';
                html += '<button type="button" class="sanFast-btn back"';
                html += 'data-dismiss="modal">再看看';
                html += '</button>';
                html += '<button type="button" onclick="loginOut()" class="sanFast-btn login">';
                html += '去意已决';
                html += '</button>';
                html += '</div>';
            $(".modal-content").html(html);
            $("#myModal").modal();
        }
        /* 退出登陆 */
        function loginOut() {
            saveCookie("token", "-1", 20, "path=/");
            deleteCookie("token");
            location.href = "../../index.html?url=1";
        }
        function checkData() {
            var nn = $(".nick-name").val();
            if(nn == "") {
                $(".nick-name").after("<em class='no-nn'>昵称必填</em>");
            }
        }
        /* 获取用户信息 */
        function getUserDetail() {
            var url = "/UserCenter/getUserDetail";
            var arg = {};
            ajaxJsonp(url, arg, renderUserDetail);
        }
        function renderUserDetail(res) {
            var user = res.data.user_info;
            var html = "";
            html += '<img src="'+ user.avatar +'" class="user-headImage-set"/>';
            if(user.nickname) {
                $(".nick-name").val(user.nickname)
            }
            $(".detail-head").append(html);
        }
</script>
</body>
</html>